<template>
    <div class="fileListContainer">
        <el-empty style="margin: auto;" v-if="!fileListModel?.length" :image-size="40" description="没有文件" />
        <template v-else>
            <div class="fileContent" v-for="(item, index) in fileListModel" :key="index" :title="item.name"
                @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" v-loading="item.status === 'uploading'">
                <div class="toolPanel">
                    <span v-if="item.status === 'success'" style="line-height: 15px;" @click="handleDownload(item)">
                        <el-icon :size="20" :color="'#FFF'">
                            <Download />
                        </el-icon>
                    </span>
                    <span
                        v-if="isSingleUpload && (item.status === 'ready' || item.status === 'fail') && formType === 'add'"
                        @click="handleUpload(item)" style="line-height: 15px;">
                        <el-icon :size="20" :color="'#FFF'">
                            <Upload />
                        </el-icon>
                    </span>
                    <span v-if="formType === 'edit' || formType === 'add'" @click="handleRemove(item)"
                        style="line-height: 15px;">
                        <el-icon :size="20" :color="'#FFF'">
                            <Delete />
                        </el-icon>
                    </span>
                </div>
                <div class="imgContainer">
                    <img v-if="item.name.includes('.doc') || item.name.includes('.docx')"
                        src="/src/assets/tableGrid/fileIcon/word.png">
                    <img v-else-if="item.name.includes('.xls')" src="/src/assets/tableGrid/fileIcon/excel.png">
                    <img v-else-if="item.name.includes('.pdf')" src="/src/assets/tableGrid/fileIcon/pdf.png">
                    <img v-else-if="item.name.includes('.json') || item.name.includes('.geojson')"
                        src="/src/assets/tableGrid/fileIcon/json.png">
                    <img v-else-if="item.name.includes('.txt')" src="/src/assets/tableGrid/fileIcon/txt.png">
                    <img v-else-if="item.name.includes('.png') || item.name.includes('.webp') || item.name.includes('.jpg') || item.name.includes('.jpeg') || item.name.includes('.tif') || item.name.includes('.tiff')"
                        src="/src/assets/tableGrid/fileIcon/picture.png">
                    <img v-else src="/src/assets/tableGrid/fileIcon/file.png">
                </div>
                <div class="nameContainer">
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </template>
    </div>
    <el-upload ref="uploadObj" v-show="formType !== 'view'" v-model:file-list="fileListModel"
        v-bind="fieldConfig.attributesBind" :on-change="fileChange" :show-file-list="false"
        :accept="fieldConfig.uploadAllowFile">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            将文件拖放至此或者<em>点击选择文件</em>
        </div>
        <template #tip>
            <div class="el-upload__tip">{{ fieldConfig.uploadTip }}</div>
        </template>
    </el-upload>
</template>

<script lang='ts' setup name='fileList'>
import { ref } from 'vue';
import { Delete, Download, Upload, UploadFilled } from '@element-plus/icons-vue';
import { ElMessage, type UploadFiles } from 'element-plus';
import DownloadUtil from '/@/utils/download';
import { getTableGridObjById } from '../../../hooks/dealData';

const props = defineProps({
    formType: String,
    fieldConfig: {
        type: Object,
        required: true
    },
    isSingleUpload: {
        type: Boolean,
        default: () => false
    },
    tableGridId: {
        type: String,
        required: true
    }
})
const uploadObj = ref();
const tableGridObj = getTableGridObjById(props.tableGridId);
const fileListModel = defineModel({ required: true, default: [] as any[] });

const onMouseEnter = (event: any) => {
    event.currentTarget.firstChild.classList.add('toolPanelalpha');
};

const onMouseLeave = (event: any) => {
    event.currentTarget.firstChild.classList.remove('toolPanelalpha');
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
const handleDownload = (uploadFile: any) => {
    if (uploadFile.name.includes('.doc') || uploadFile.name.includes('.docx')) {
        DownloadUtil.word(uploadFile.url, uploadFile.name);
    }
    if (uploadFile.name.includes('.xls')) {
        DownloadUtil.excel(uploadFile.url, uploadFile.name);
    }
    if (uploadFile.name.includes('.txt')) {
        DownloadUtil.txt(uploadFile.url, uploadFile.name);
    }
    if (uploadFile.name.includes('.geojson') || uploadFile.name.includes('.json')) {
        DownloadUtil.json(uploadFile.url, uploadFile.name);
    }
    if (uploadFile.name.includes('.pdf')) {
        DownloadUtil.pdf(uploadFile.url, uploadFile.name);
    }
    if (uploadFile.name.includes('.zip')) {
        DownloadUtil.zip(uploadFile.url, uploadFile.name);
    }
    if (uploadFile.name.includes('.png') || uploadFile.name.includes('.jpg') || uploadFile.name.includes('.jpeg')) {
        DownloadUtil.image(uploadFile.url, uploadFile.name);
    }
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
const handleUpload = (uploadFile: UploadFile) => {
    uploadFile.status = 'uploading';
    tableGridObj.uploadFile(uploadFile).then(() => {
        uploadFile.status = 'success';
        ElMessage({
            message: '上传成功！！！',
            type: 'success',
        });
    }).catch(() => {
        uploadFile.status = 'fail';
        ElMessage.error('上传失败，请重新上传！！！');
    })
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
const handleRemove = async (uploadFile: UploadFile) => {
    if (uploadFile.status === 'success') {
        // 后续网络删除接口在此实现
        await tableGridObj.deleteFile(uploadFile.id).then((res: any) => {
            if (res.status === 'success') {
                ElMessage({
                    message: '删除成功！',
                    type: 'success',
                });
            } else {
                ElMessage.error('删除失败，请联系管理员！');
                return false;
            }
        });
    }
    uploadObj.value.handleRemove(uploadFile); // 触发fileChange
    fileListModel.value = fileListModel.value.filter((item: UploadFile) => {
        return item.name !== uploadFile.name;
    })
}

function fileChange(uploadFile: UploadFile, uploadFiles: UploadFiles) {
    fileListModel.value = uploadFiles;
}
</script>

<style lang="scss" scoped>
.fileListContainer {
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 4px;
    margin-bottom: 10px;

    .fileContent {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5px;
        padding: 15px 5px 6px 5px;
        border: 1px solid #ddd;
        border-radius: 3px;
        width: 110px;

        .toolPanel {
            position: absolute;
            top: 0;
            background-color: rgba($color: #000000, $alpha: 0.6);
            display: none;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;
            height: 30px;
            transition-property: display;
            transition-duration: 2s;
            transition-delay: 0s;

            span {
                cursor: pointer;
            }
        }

        .toolPanelalpha {
            display: flex;
        }

        .imgContainer {
            width: 50px;

            img {
                width: 50px;
            }
        }

        .nameContainer {
            text-align: center;
            width: 100px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
